<template>
	<view :class="['part-item', clasName]" @tap="onClick">
		<label></label>
		<view>{{ partInfo[labelKey] }}：</view>

		<text :style="`color: ${!partInfo.status ? '#455BDF' : partInfo.status === 1 ? '#FB453B' : '#989BA2' }`"><slot name="value" :value="partInfo">{{ partInfo[valKey] }}</slot></text>
	</view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const emits = defineEmits(['onClickHandler']);

const props = defineProps({
	partInfo: {
		type: Object,
		default: {
			name: '行政审批服务六处',
			value: 0
		}
	},
	labelKey: {
		type: String,
		default: 'proDepart'
	},
	valKey: {
		type: String,
		default: 'badNumber'
	},
	clasName: String
})

const onClick = () => {
	emits('onClickHandler', props.partInfo)
}

</script>

<style lang="sass" scoped>
.part-item
	display: flex
	width: 50%
	max-width: 50%
	align-items: center
	padding-left: 22rpx
	padding-right: 30rpx
	box-sizing: border-box
	padding-top: 30rpx
.part-item label
	width: 14rpx
	height: 14rpx
	min-width: 14rpx
	background: linear-gradient(0deg, #455BDF 0%, #5970FA 100%)
	border-radius: 50%
	margin-right: 25rpx
	
.part-item view
	margin-right: 25rpx
	font-size: 28rpx
	max-width: 120rpx
.part-item text
	font-size: 28rpx
	font-family: Source Han Sans CN
	font-weight: bold
	color: #455BDF
	line-height: 36px
.part-item.unsave-item
	flex-basis: 50%
	min-width: 50%
	padding-top: 40rpx
.part-item.pt10
	padding-top: 10px!important
</style>
